import React from 'react'
import { Empty } from 'react-vant';
import {useDispatch,useSelector} from "react-redux"
import { Image } from 'react-vant';
import {useState,useEffect} from "react"
import * as action from "../action"
import { SubmitBar } from 'react-vant';
import { CheckListItem } from 'antd-mobile/es/components/check-list/check-list-item';
function Myshopcar() {
let [sum,setSum] = useState(0)

  let dispatch = useDispatch()
  let store = useSelector((state)=>{
      return {
          ...state.shopreducer
      }
  })
  useEffect(()=>{
    let checkarr = store.shoparr.filter((item)=>item.flag)
    console.log(checkarr);
   let sumzong =  checkarr.reduce((a,b)=>{
        return a + b.price * b.number
    },0)
    setSum(sumzong)
},[ store.shoparr])
  console.log(store);
  let addfn = (id)=>{
    //   alert(id)
      // 第一步组件，在组件中调用action里的方法
      // 去action中写这个方法
      // 去写reducer
      dispatch(action.addFn(id))
  }
  let delfn = (id)=>{
      dispatch(action.delFn(id))
  }
  let checkallfn = ()=>{
      dispatch(action.checkAll())
  }
  let CheckListItem = (id)=>{
      dispatch(action.checkitem(id))
  }
  return (
    <div>
        <div>全选：<input type="checkbox" checked={store.checkall} onChange={checkallfn}/></div>
        {
            store.shoparr &&  store.shoparr.length? store.shoparr.map((item,index)=>{
                return <div key={index}>
                     <Image lazyload src={item.img} key={index} style={{width:"100px"}} />
                    <h4> <input type="checkbox" checked={item.flag} onChange={()=>CheckListItem(item.id)}/> <b>价格：{item.price}</b><button onClick={()=>delfn(item.id)}>--</button><span>{item.number}</span><button  onClick={()=>addfn(item.id)}>++</button></h4>
                </div>
            }):<Empty description="购物车空空，请添加到一条商品到购物" />
        }
        <SubmitBar price={sum*100} buttonText="提交订单" />

    </div>
  )
}

export default Myshopcar